<template>
  <div class="view-account">
    <div class="view-account-header"></div>
    <div class="view-account-container">
      <div class="view-account-top">
        <div class="view-account-top-logo">
          <img src="~@/assets/images/account-logo.png" alt="" />
        </div>
        <div class="view-account-top-desc">Naive Ui Admin中台前端/设计解决方案</div>
      </div>
      <div class="view-account-form">
        <span style="display: block;font-weight: bold;font-size: 16px;margin-bottom: 2vh;text-align: center">注册新用户</span>
        <n-form
          ref="formRef"
          label-placement="left"
          size="large"
          :model="formInline"
          :rules="formRules"
        >
          <n-form-item path="username">
            <n-input v-model:value="formInline.username" placeholder="请输入注册登录账号">
              <template #prefix>
                <n-icon size="18" color="#808695">
                  <PersonOutline />
                </n-icon>
              </template>
            </n-input>
          </n-form-item>
          <n-form-item path="realName">
            <n-input v-model:value="formInline.realName" placeholder="请输入昵称">
              <template #prefix>
                <n-icon size="18" color="#808695">
                  <PersonOutline />
                </n-icon>
              </template>
            </n-input>
          </n-form-item>
          <n-form-item path="password">
            <n-input
              v-model:value="formInline.password"
              type="password"
              show-password-toggle
              placeholder="请输入密码"
            >
              <template #prefix>
                <n-icon size="18" color="#808695">
                  <LockClosedOutline />
                </n-icon>
              </template>
            </n-input>
          </n-form-item>
          <n-form-item path="email">
            <n-input v-model:value="formInline.email" placeholder="请输入邮箱">
              <template #prefix>
                <n-icon size="18" color="#808695">
                  <PersonOutline />
                </n-icon>
              </template>
            </n-input>
          </n-form-item>
          <n-form-item path="phone">
            <n-input v-model:value="formInline.phone" placeholder="请输入手机号码">
              <template #prefix>
                <n-icon size="18" color="#808695">
                  <PersonOutline />
                </n-icon>
              </template>
            </n-input>
          </n-form-item>
          <n-form-item path="smsCode">
            <n-input
              v-model:value="formInline.smsCode"
              placeholder="请输入短信验证码"
            >
              <template #prefix>
                <n-icon size="18" color="#808695">
                  <MailOutline />
                </n-icon>
              </template>
            </n-input>
            <n-button style="margin-left: 5px;" :disabled="btnDisabled" @click="sendMsgCode">{{btnText}}</n-button>
          </n-form-item>
        </n-form>
        <n-grid :cols="5">
          <n-gi :span="3">
            <n-button type="primary" size="large" block @click="registerSubmit">
              <span v-if="!loading">注册</span>
              <span v-else>提交中</span>
            </n-button>
          </n-gi>
          <n-gi :span="2">
            <router-link to="/login">
              <a class="forget-pass" style="float: right;margin-top: 9px;">使用已有账户登录</a>
            </router-link>
          </n-gi>
        </n-grid>
      </div>
    </div>
  </div>
</template>
<script>
import {defineComponent,ref,reactive} from 'vue'
import { PersonOutline, LockClosedOutline,MailOutline } from '@vicons/ionicons5';
import { useMessage } from 'naive-ui';
import {useRouter} from 'vue-router'
import logo from '@/assets/images/logo.png';
import {checkUniqueness,sendSmsCode} from "../../api/system/user";
export default defineComponent({
  name: "Register",
  components:{
    PersonOutline,
    LockClosedOutline,
    MailOutline
  },
  setup(){
    const formInline=reactive({
      username:'',
      realName:'',
      email:'',
      phone:'',
      password: '',
      smsCode:'',
    });
    const tabName=ref('findByMobile');
    const count=ref(60);
    const btnDisabled=ref(false);
    const btnText=ref('获取验证码');
    const loading=ref(false);
    const formRef=ref();
    const router=useRouter();
    const message = useMessage();
    const downCount=()=>{
      if(count.value==0){
        btnText.value='获取验证码';
        btnDisabled.value=false;
        count.value=60
        return ;
      }else{
        btnText.value=count.value+"秒后重试"
        count.value--;
        btnDisabled.value=true;
      }
      setTimeout(()=>{
        downCount();
      },1000);
    };
    const formRules={
      username:{
        required:true,trigger:'blur',
        validator: (rule, value) => {
          return new Promise((resolve, reject) => {
            if(value==''){
              reject(Error('请输入登录账号'))
            }else{
              checkUniqueness({username:value}).then(res=>{
                if(res){
                  reject(Error('登录账号已存在'))
                }else{
                  resolve()
                }
              })
            }
          })
        }
      },
      email:{required:true,message:'请输入邮箱地址',trigger:'blur',
        validator: (rule, value) => {
          return new Promise((resolve, reject) => {
            const regEmail=/^([a-zA-Z]|[0-9])(\w|\-)+@[a-zA-Z0-9]+\.([a-zA-Z]{2,4})$/;
            if(value==null) {
              reject(Error('请输入邮箱'))
            }else if(!regEmail.test(value)){
              reject(Error('邮箱格式不正确'))
            }else{
              checkUniqueness({email:value}).then(res=>{
                if(res){
                  reject(Error('邮箱已存在'))
                }else{
                  resolve()
                }
              })
            }
          })
        }
      },
      phone:{required:true,trigger:'blur',
        validator: (rule, value) => {
          return new Promise((resolve, reject) => {
            if(value==''){
              reject(Error('请输入手机号码'))
            }else{
              const reg = /^1[3|4|5|7|8][0-9]\d{8}$/;
              if(!reg.test(value)){
                reject(Error('手机号码不正确'))
              }else{
                checkUniqueness({mobile:value}).then(res=>{
                  if(res){
                    reject(Error('手机号码已存在'))
                    btnDisabled.value=true;
                  }else{
                    btnDisabled.value=false;
                    resolve()
                  }
                })
              }
            }
          })
        }
      },
      password:{required:true,trigger:'blur',
        validator: (rule, value) => {
          return new Promise((resolve, reject) => {
            if(value==''){
              reject(Error('请输入密码'))
            }else if(value.length<8){
              reject(Error('密码最少为8位'))
            }else{
              resolve()
            }
          })
        }
      },
      smsCode:{required:true,message:'请输入短信验证码',trigger: 'blur'},
    }
    const sendMsgCode=()=>{
      if(formInline.phone==''){
        message.error('请输入手机号码');
        return;
      }
      sendSmsCode(formInline.phone).then((res)=>{
        if(res){
          message.success('发送成功')
          downCount();
        }
      })
    };
    const onAuthCode = () => {
      formInline.isCaptcha = true;
    }
    const registerSubmit=()=>{
      formRef.value.validate((errors)=>{
        if(!errors){
          loading.value=true;
           register(formInline.value).then(res=>{
             if(res){
               message.success('注册成功');
               loading.value=false;
               router.push({name:'register_result',query:{username:formInline.value.username}})
             }
           })
        }
      })
    }
    return {
      formInline,
      tabName,
      btnText,
      btnDisabled,
      formRules,
      loading,
      formRef,
      sendMsgCode,
      onAuthCode,
      logo,
      registerSubmit
    }
  }
})
</script>

<style lang="less" scoped>
.view-account {
  display: flex;
  flex-direction: column;
  height: 100vh;
  overflow: auto;

  &-container {
    flex: 1;
    padding: 32px 0;
    width: 384px;
    margin: 0 auto;
  }

  &-top {
    padding: 32px 0;
    text-align: center;

    &-desc {
      font-size: 14px;
      color: #808695;
    }
  }

  &-other {
    width: 100%;
  }

  .default-color {
    color: #515a6e;

    .ant-checkbox-wrapper {
      color: #515a6e;
    }
  }
}

@media (min-width: 768px) {
  .view-account {
    background-image: url('../../assets/images/login.svg');
    background-repeat: no-repeat;
    background-position: 50%;
    background-size: 100%;
  }

  .page-account-container {
    padding: 32px 0 24px 0;
  }
}
</style>
